<template>
  <div class="mine-main-container mine-wallet-container">
    <p class="wallet-title" :icon="WarningFilled">
      <span>钱包余额</span>
      <el-icon>
        <WarningFilled />
      </el-icon>
    <div class="tip_icon" aria-describedby="ele-WarningFilled" tabindex="0">
    </div>
    </p>
    <div class="wallet-prize-container">
      <div class="available_price">￥0.00</div>
    </div>
    <div class="withdraw_button">
      <button type="button" class="withdrawal">
        <span>提现</span>
      </button>
    </div>
    <div class="bottom-tip-container">
      <span data-v-37831a12="" data-v-54cc36bb="" class="contact-tip">
        <div data-v-37831a12="" class="icon-item normal el-popover__reference" :icon="WarningFilled" tabindex="0">
          <el-icon>
            <WarningFilled />
          </el-icon>
          <span>联系客服</span>
        </div>
      </span>
    </div>
  </div>

  <el-card shadow="always" style="margin-top:20px">
    <p class="moneey-title">
      钱包明细
      <el-icon>
        <WarningFilled />
      </el-icon>
      <hr style="margin-top:20px" />
    <div class="tip_icon" aria-describedby="el-tooltip-1337" tabindex="0">
    </div>
    </p>
    <span class="abcd">暂无数据</span>
  </el-card>

</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Wallet",
});
</script>

<script setup lang="ts">
import { Search, WarningFilled } from '@element-plus/icons-vue'
</script>

<style scoped>
.wallet-title {
  font: size 16px;
  color: #111;
  text-align: center;
  margin: 32px, 0;
  position: relative;
}

/* .wallet-title::after{
      content:"\e685" ;
      font-family: "iconfont";
      position: absolute;
      top: -13px;
      width: 15px;
      height: 30px;
      right: 430px;
    } */
.wallet-prize-container {
  padding: 60px 0 51px;
}

.available_price {
  font-size: 26px;
  color: #111;
  text-align: center;
  font-weight: 700;
}

.withdraw_button {
  width: 100%;
  margin: 0 auto;
}

.withdrawal {
  width: 180px;
  height: 50px;
  /* margin: 0 auto; */
  margin-left: 410px;
  border-radius: 10px;
  background-color: #fc9bc2;
  border: none;

}

.withdrawal span {
  color: #fff;
  font-size: 14px;
}

.bottom-tip-container {
  text-align: center;
  padding: 111px 0 16px;
}

/* .tip::before{ 
      content:"\e638" ;
      font-family: "iconfont";
      width: 20px;
      height: 20px;
      margin-right: 12px;
      vertical-align: text-bottom;
      transform: translateY(-1px);
    } */
.moneey-title {
  font: size 16px;
  color: #111;
  text-align: left;
  margin: 32px 0;
  position: relative;
}

/* .moneey-title::after{
      content:"\e685" ;
      font-family: "iconfont";
      position: absolute;
      top: -13px;
      width: 15px;
      height: 30px;
      right: 865px;
    } */

.el-card__body .abcd {
  text-align: center;
  font-size: 14px;
  padding: 20px 0px;
  color: #909399;
}
</style>
